<template>
  <div>
    <!-- 三级分类全局组件 -->
    <Category :scene="scene"></Category>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 10px">
      <!-- 属性展示表格 -->
      <div v-show="scene == 0">
        <el-button type="primary" size="default" :icon="Plus" style="margin-bottom: 10px" @click="addAttr">添加属性
        </el-button>
        <el-table border stripe :data="attrList">
          <el-table-column label="序号" width="80" type="index" align="center"> </el-table-column>
          <el-table-column label="属性名称" width="120" prop="attrName"> </el-table-column>
          <el-table-column label="属性值名称">
            <template #="{row,$index}">
              <el-tag style="margin:0px 3px" class="ml-2" :type="attrVal.id%2==0?'success':'warning'"
                v-for="(attrVal,index) in row.attrValueList" :key="attrVal.id">{{attrVal.valueName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #="{row,$index}">
              <el-button type="primary" size="small" :icon="Edit"></el-button>
              <el-button type="danger" size="small" :icon="Delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加属性窗口 -->
      <div v-show="scene == 1">
        <el-form ref="form" :inline="true">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" clearable v-model="attrParams.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="default" :icon="Plus" :disabled="!attrParams.attrName" @click="addAttrValue">
          添加属性值</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-table border stripe style="margin:20px 0px" :data="attrParams.attrValueList">
          <el-table-column label="序号" width="120px" align="center" type="index"></el-table-column>
          <el-table-column label="属性值">
            <template #="{row,$index}">
              <el-input :ref="(vc) => (inputArr[$index] = vc)" v-if="row.flag" size="small" placeholder="请输入属性值"
                v-model="row.valueName" @blur="toLook(row,$index)"></el-input>
                <div v-else @click="toEdit(row,$index)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template #="{row,$index}">
              <el-button type="danger" :icon="Delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
  
<script setup lang="ts">
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
//引入分类的仓库
import useCategoryStore from "@/stores/category";
let categoryStore = useCategoryStore();
//引入组合式APIwatch
import { watch, ref, reactive,nextTick } from "vue";
//引入请求函数
import { reqAttrList } from "@/api/product/attr/attr";


//存储平台属性的数据
let attrList = ref([]);
//切换场景的值
let scene = ref<number>(1)
//平台属性值
let attrParams = reactive({
  attrName: "", //属性名
  categoryId: "", //所属三级分类id
  categoryLevel: 3, //3级分类
  attrValueList: [],
})
//定义数组ref类型数据，将来存储el-input组件的实例
let inputArr = ref([]);


//监听三级分类的ID变化，如果发生变化需要发请求
watch(
  () => categoryStore.c3Id,
  () => {
    //判断:三级分类ID保证有数据
    if (categoryStore.c3Id == "") return;
    //获取平台属性方法
    getAttrList();
  }
);
//获取商品属性的方法
const getAttrList = async () => {
  let result = await reqAttrList(
    categoryStore.c1Id,
    categoryStore.c2Id,
    categoryStore.c3Id
  );
  //存储数据---平台属性
  attrList.value = result;
};

//取消按钮的回调
const cancel = () => {
  scene.value = 0
}

//添加属性按钮的回调
const addAttr = () => {
  scene.value = 1
}
//添加属性值
const addAttrValue = () => {
  attrParams.attrValueList.push({
    valueName: "",
    //给每一个属性值添加标记:用来切换编辑模式与查看模式
    flag: true, 
  });
}

//切换查看模式
const toLook = (row,$index)=>{
  //判断是否为空字符串
  if(row.valueName.trim()== ''){
    
  }
  row.flag = false
}

//切换编辑模式
const toEdit = (row,$index)=>{
  row.flag = true;
  nextTick(() => {
    inputArr.value[$index].focus();
  });
}
//保存按钮的回调
const save = ()=>{
  scene.value = 0
}
</script>
  
<style scoped>

</style>